<template> 
  <el-container>
    <div class="body">
      <!-- <div class="body"> -->
        <div class="head">
          <h1>TCM</h1>
          <h4 class="text">TCM is a database of traditional Chinese medicine .It includes the information of herb, formula, target, plants, chemistry and disease. <el-link type="info">Read more</el-link></h4>
        </div>
        <div class="list">
        <el-radio-group v-model="selectType">
          <el-badge :value=numList[0] class="item"><el-radio label="中药材" border>中药材</el-radio></el-badge>
          <el-badge :value=numList[1] class="item"><el-radio label="中药组方" border>中药组方</el-radio></el-badge>
          <el-badge :value=numList[2] class="item"><el-radio label="化合物" border>化合物</el-radio></el-badge>
          <el-badge :value=numList[3] class="item"><el-radio label="来源植物名" border>来源植物名</el-radio></el-badge>
          <el-badge :value=numList[4] class="item"><el-radio label="靶点" border>靶点</el-radio></el-badge>
          <el-badge :value=numList[5] class="item"><el-radio label="疾病" border>疾病</el-radio></el-badge>
        </el-radio-group>
        </div>
        <div>
          <el-input v-model="nodeName" class="input" placeholder="Enter your search keywords" suffix-icon="el-icon-search" @keyup.enter.native="getSearchResult"></el-input>
          <el-button icon="el-icon-search" @click="getSearchResult" :loading="searchLoad">搜索</el-button>
        </div>
        <div>
          <el-radio-group v-model="selectMode" @change="changeMode">
            <el-badge class="item"><el-radio label="0" >精确搜索</el-radio></el-badge>
            <el-badge class="item"><el-radio label="1" >模糊搜索</el-radio></el-badge>
          </el-radio-group>
        </div>
        <div>
          <p style="color:white">examples:  {{example}}</p>
        </div>
<!--         <div class="statistic" v-loading="statisticLoad">
          <div id="nodeCount">
          </div>
          <div id="relationCount">

          </div>
        </div> -->
        <!-- <div>
          <el-button type="primary" size="default" @click="testHello" >测试联通</el-button>
          <el-button type="primary" size="default" @click="testNodesCount"  >测试结点个数</el-button>
          <el-button type="primary" size="default" @click="testSearchResult" >测试搜索结果</el-button>
        </div> -->
      <!-- </div> -->
    </div>
    <!-- <el-footer>Footer</el-footer> -->
  </el-container>


  
</template>
<script>

// import {getHello,getNodesCount,searchByNodeName,statistic} from '../api/api.js'

import {getHello,getNodesCount,searchByNodeName} from '../api/api.js'

export default {
  components:{
    // Navigation
  },
  data() {
    return {
      keyWord:'',
      numList:[],
      hello:'',
      searchResult:[],
      nodesCount:0,

      selectType:'中药材',
      selectMode:'0',
      nodeName:'',
      searchLoad:false,
      exampleData:['羌活,独活','羌活胜湿汤','Embelin','AR','LYNCH SYNDROME I'],
      nodeCountList:[],
      relationCountList:[],
      statisticLoad : true
    }
  },
  computed:{
    example(){
      switch (this.selectType) {
        case "中药组方":
          return this.exampleData[1]  
        case "化合物":
          return this.exampleData[2]
        case "靶点":
          return this.exampleData[3]    
        case "疾病":
          return this.exampleData[4]
        default:
          return this.exampleData[0]      
      }
    }
  },
  methods: {
    inputKey() {
      this.$forceUpdate()
      console.log(this.keyWord)
    },
    getValue(e) {
      this.keyWord = JSON.stringify(e.target.innerHTML) 
      this.$router.push({path:'/browse',query: {keyWord:this.keyWord}})
    },
    testHello(){
      getHello().then(response =>{
      this.hello = response.data['hello']
      console.log(this.hello)
    }).catch(error =>{
      console.error(error)
    })
    },
    testNodesCount(){
      const label = '中药材'
      getNodesCount(label).then(response =>{
        this.nodesCount = response.data['中药材']
        console.log(this.nodesCount)
      }).catch(error =>{
        console.error(error)
      })
    },
//     testStatistic(){
//       const nodeLabels = ['中药材','中药组方','化合物','靶点','来源植物名','疾病']
//       const relationLabels = ['方剂组成','靶点对应疾病','化合物对应靶点','药材组分','药材来源植物名']
//       statistic(nodeLabels,relationLabels).then(response =>{
//         this.nodeCountList = response.data['nodes_count']
//         this.relationCountList = response.data['relations_count']
//         console.log("nodeCountList:",this.nodeCountList)
//         console.log("relationCountList:",this.relationCountList)
//       }).catch(error =>{
//         console.log('testStatisticError,',error)
//       })
//     },
//     getStatistic(){
//       const nodeLabels = ['中药材','中药组方','化合物','靶点','来源植物名','疾病']
//       const relationLabels = ['方剂组成','靶点对应疾病','化合物对应靶点','药材组分','药材来源植物名']
//       statistic(nodeLabels,relationLabels).then(response =>{
//         this.nodeCountList = response.data['nodes_count']
//         this.relationCountList = response.data['relations_count']

//         const nodeCount = []
//         const relationCount = []
//         for(let i = 0; i < this.nodeCountList.length; i ++) {
//           nodeCount.push(this.nodeCountList[i][nodeLabels[i]])
//         }
//         for(let j = 0; j < this.relationCountList.length; j ++) {
//           var kv = {}
//           kv.value = this.relationCountList[j][relationLabels[j]]
//           kv.name = relationLabels[j]
//           relationCount.push(kv)
//         }

//         let mychart1 = this.$echarts.init(document.getElementById('nodeCount'))
//         let mychart2 = this.$echarts.init(document.getElementById('relationCount'))
//         let option1 = {
//           title: {
//             text: '结点类型',
//             textStyle: {
//               color: 'white'
//             }
//           },
//           tooltip: {
//           trigger: 'axis',
//           axisPointer: {
//             type: 'shadow'
//             }
//           },
//           grid: {
//             left: '3%',
//             right: '4%',
//             bottom: '3%',
//             containLabel: true
//           },
//           textStyle: {
//           color: 'white'
//           },
//           xAxis: [
//             {
//               type: 'category',
//               data: nodeLabels,
//               axisTick: {
//                 alignWithLabel: true
//               },
//               axisLabel: {
//               interval: 0
//               }
//             }
//           ],
//           yAxis: [
//             {
//               type: 'value'
//             }
//           ],
//           series: [
//             {
//               type: 'bar',
//               barWidth: '60%',
//               data: nodeCount,
//               itemStyle: {
//                 color: function(params) {
//                   var colors = ['#EE8484', '#73C0DE', '#5470C6', '#91CC75', '#FAC858','#9A60B4'];
//                   return colors[params.dataIndex];
//                 }
//               },
//             }
//           ]
//         };
//         let option2 = {
//           title: {
//             text: '结点关系', 
//             textStyle: {
//               color: 'white'
//             }
//           },
//           tooltip: {
//             trigger: 'item'
//           },
//           legend: {
//             top: '10%',
//             bottom: '10%',
//             left: 'center',
//             textStyle: {
//             color: 'white'
//           },
//         },
//             series: [
//               {
//                 type: 'pie',
//                 radius: ['40%', '70%'],
//                 center: ['50%', '60%'],
//                 avoidLabelOverlap: false,
//                 itemStyle: {
//                   borderRadius: 10,
//                   borderColor: '#fff',
//                   borderWidth: 2
//                 },
//                 label: {
//                   show: false,
//                   position: 'center'
//                 },
//                 labelLine: {
//                   show: false
//                 },
//                 data: relationCount
//               }
//             ]
//     };
//         mychart1.setOption(option1)
//         mychart2.setOption(option2)
//         this.statisticLoad=false
//         console.log("nodeCountList:",this.nodeCountList)
//         console.log("relationCountList:",this.relationCountList)
//       }).catch(error =>{
//         console.log('testStatisticError,',error)
//       })
//     },
    testSearchResult(){
      const selectMode = 1 //0或1
      const nodeName = '羌活'
      const selectType ='中药组方'//中药材或中药组方
      searchByNodeName(selectMode,nodeName,selectType).then(response =>{
        this.searchResult = response.data['nodeList']
        console.log('searchResult',this.searchResult)
      }).catch(error =>{
        console.error(error)
      })
    },
    getNodeCount(){
      const label = ['中药材','中药组方','化合物','来源植物名','靶点','疾病']
      for(var i = 0; i < label.length; i ++) {
        const lab = label[i];
        getNodesCount(lab).then(response =>{
        this.numList.push(response.data[lab]) 

      }).catch(error =>{
        console.error(error)
      })
      }
    },
     getSearchResult(){
      this.searchLoad = true
      searchByNodeName(this.selectMode,this.nodeName,this.selectType).then(response =>{
      this.searchResult = response.data['nodeList']
      var keyList = response.data['keyList']
      this.$router.push({path:'/browse',query: {nodeList:this.searchResult,keyList:keyList,nodeName:this.nodeName,selectType:this.selectType}})
      }).catch(error =>{
      console.error(error)
      })    
    },    
    changeMode(e) {
      this.selectMode = e
    }
  },
  mounted() {
//     this.getStatistic();
   
  }
}
</script>

<style lang="scss">
  .body {
    background-image: url("../pic/background.jpg");
    // background-size: cover;/* 背景图片自适应容器大小 */
    display: block;
    height: 100vh; /* 设置高度为屏幕高度的75% */
    width: 100%;
     .head {
    color: white;
  }
  .text {
    font-weight: normal;
    font-size:20px;
  }
  .list {
    margin-top: 50px;
  }
  .el-button {
    background-color: transparent;
    color: white;
    border-radius: 30px;
  }
  .input {
    background-color: transparent;
    color: white;
    margin: 20px ;
    width: 500px;
  }
  .item {
  margin-right: 10px;
}
  .el-radio {
  background-color: transparent;
  color: white;
}
.statistic {
  background-color: #000000;
  #nodeCount {
    margin-left: 30px;
    // margin-top/: 20px;
    height: 450px;
    width: 400px;
    float: left;
    border: 1px solid white;
    border-radius: 10px;
  }
  #relationCount {
    border: 1px solid white;
    border-radius: 10px;
    margin-left: 600px;
    margin-top: 60px;
    height: 450px;
    width: 400px;
  }
}
}
</style>
